<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../assets/js/base/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>组件的切换</title>
		<style>
			/* .v-enter, 
			.v-leave-to{
				opacity: 0;
				transform: translateX(150px);
			}
			
			.v-enter-active,
			.v-leave-active{
				transition: all 0.5s ease; 
			} */
			
			.ball{
				width: 15px;
				height: 15px;
				background-color: red;
				border-radius: 50%;
			}
			
		</style>
	</head>
	<body>
		
		<div id="app2">
			<input type="button" value="加入购物车" @click="flag2=!flag2"/>
			<transition @before-enter="beforeEnter"
				@enter="enter"
				@after-enter="afterEnter">
				<div class="ball" v-show="flag2"></div>
				
			</transition>
		</div>
		
		<script type="text/javascript">
			var vm2 = new Vue({
				el: "#app2",
				data:{
					flag2: false
				},
				methods:{
					beforeEnter: (el) => {
						el.style.transform = 'translate(0,0)';
					},
					enter: (el, done) => {
						el.offsetWidth;
						el.style.transform = 'translate(150px, 450px)';
						el.style.transition = 'all 1s ease'
						done();
					},
					afterEnter(el){
						// 不需要后半场动画，直接跳过，并且让小球隐藏
						// true -> false
						this.flag2 = !this.flag2;
						// VUE把一个完整的动画，使用钩子函数，拆分成了两部分
						// 使用flag标识符表示动画的切换
						// 开始：flag= false  => true -> false
					}
				}
			})
		</script>
		
		<div id="app">
			
			<!-- 组件切换的方式一：只能切换2个 -->
			<a href="" @click.prevent="flag=true">登录</a>
			<a href="" @click.prevent="flag=false">注册</a>
			<login v-if="flag"></login>
			<reg v-else="flag"></reg>
			
			<!-- VUE提供了component标签，来展示对应名称的组件 -->
			<!-- :is属性可以用来指定要展示的组建的名称，component 是一个占位符 -->
			
			<a href="" @click.prevent="comName='login'">登录</a>
			<a href="" @click.prevent="comName='reg'">注册</a>
			<transition mode="out-in">
				<component :is="comName"></component>
			</transition>
			
			<!-- VUE提供的标签：component, template,transition,transitionGroup -->
			
		</div>

		<template id="login">
			<div>
				<h1>login</h1>
			</div>
		</template>
		<template id="reg">
			<div>
				<h1>register</h1>
			</div>
		</template>
		
		<script type="text/javascript">
			
			// 定义全局注册和登录组件
			Vue.component('login',{
				template:"#login"
			})
			Vue.component('reg',{
				template:"#reg"
			})
			
			var vm = new Vue({
				// 属性
				el: "#app",
				data: {
					flag: true,
					comName: 'login'
				}
			});
		</script>
	</body>
</html>
